<template>
  <ul class="panda">
      <li>id: {{ id }}</li>
      <li>name: {{ name }}</li>
  </ul>
</template>

<script>
export default {
  name: 'PandaView',
  props: [ 'id' , 'name' ],
  // 生命周期钩子
  beforeUpdate(){
    console.log( '===> panda view : before update' );
  },
  // 生命周期钩子
  updated(){
    console.log( '===> panda view : updated' );
  },
  // 组件内守卫
  // 在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate(to,from){
    console.log( '===> panda view : before route update' );
    console.log( '\tfrom: ' , from.path , ' , to: ' , to.path ); 
  }
}
</script>

<style>
.panda { margin: 20px ; }
</style>